<!-- 搜索页面 -->
<template>
	<view>
		<!-- 自定义导航 -->
		<!-- #ifndef APP-PLUS -->
		<view
			style="height: 88rpx;z-index: 9999;"
			class="flex align-center px-2 position-fixed left-0 top-0 right-0 bg-white "
		>
			<view class="iconfont icon-sousuo position-absolute text-muted" style="left: 30rpx;"></view>
			<input
				class="flex-1 rounded bg-light"
				style="padding: 5rpx 0 5rpx 50rpx;"
				type="text"
				v-model="searchText"
				@confirm="searchEvent"
				:placeholder="getPlaceholder"
				placeholder-style="color: #CCCCCC;"
				ref="searchTextValue"
			/>
			<text class="pl-2" @click="goBack">取消</text>
		</view>
		<view style="height: 88rpx;"></view>
		<!-- #endif -->
		<template v-if="searchList.length === 0">
			<!-- 搜索历史 -->
			<view class="py-2 font-md px-2">搜索历史</view>
			<view class="flex flex-wrap">
				<view
					class="border rounded font mx-2 my-1 px-2"
					v-for="(item, index) in historyList"
					:key="index"
					hover-class="bg-light"
					@click="tabSearchHistory(item)"
				>
					{{ item }}
				</view>
			</view>
				<noThing>{{ historyText }}</noThing>
		</template>
		<template v-else>
			<!-- 搜索结果 数据列表 -->
			<block v-for="(item, index) in searchList" :key="index">
				<template v-if="type === 'post'">
					<!-- 帖子列表 组件 -->
					<commonList :item="item" :index="index"></commonList>
				</template>
				<template v-if="type === 'topic'">
					<!-- 话题列表组件 -->
					<topicList :item="item" :index="index"></topicList>
				</template>
				<template v-if="type === 'user'">
					<!-- 用户列表组件 -->
					<FriendsList :item="item" :index="index"></FriendsList>
				</template>
			</block>
			<!-- 上拉加载 -->
			<loadMore :loadmore="loadmore"></loadMore>
		</template>
	</view>
</template>

<script>
	// 引入帖子列表 数据
	import commonList from '@/components/common/common-list.vue';
	// 引入 话题列表 数据
	import topicList from '@/components/dynacmic/topic-list.vue';
	// 引入 用户列表 数据
	import FriendsList from '@/components/friends-list/friends-list.vue';
	// 引入上拉更多 组件
	import loadMore from '@/components/common/load-more.vue';
	// 引入兜底样式组件
	import noThing from '@/components/common/no-thing.vue';
	export default {
		components: {
			commonList,
			topicList,
			FriendsList,
			loadMore,
			noThing,
		},
		data() {
			return {
				searchText: '', // 记录搜索框输入的内容
				historyList: [], // 搜索历史
				searchList: [], // 搜索之后的 结果
				// 当前搜索类型
				type: 'post', // 默认搜索帖子
				loadmore: '上拉加载更多',
				page: 1, // 页码，默认第一页
				// 兜底样式文字
				historyText: '还没有相关内容，搜搜看吧',
			};
		},
		// 监听导航 文本框输入
		onNavigationBarSearchInputChanged(e) {
			// 搜索输入的 内容 =  用户输入的内容
			this.searchText = e.text;
		},
		// 监听原生标题栏 按钮点击事件
		onNavigationBarButtonTap(e) {
			// console.log(e); 导航栏可能存在多个图标，搜索图标索引为 0
			if (e.index === 0) {
				this.searchEvent();
			}
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(e) {
			// 搜索输入的 内容 =  用户输入的内容
			this.searchText = e.text;
			this.searchEvent();
		},
		// 计算属性
		computed: {
			getPlaceholder() {
				let pageTitle = '帖子';
				switch (this.type) {
					case 'post':
						pageTitle = '帖子';
						break;
					case 'topic':
						pageTitle = '话题';
						break;
					case 'user':
						pageTitle = '用户';
						break;
				}
				return '搜索' + pageTitle;
			},
		},
		// 监听页面加载时 -----------------------------------------------
		onLoad(e) {
			// 如果 其他页面 进入 携带 type存在 （post帖子，topic话题，user用户)
			if (e.type) {
				// 搜索的类型
				this.type = e.type;
			} else if (!e) {
				return;
			}
			// 修改 原生导航 搜索占位符
			let pageTitle = '帖子';
			switch (this.type) {
				case 'post':
					pageTitle = '帖子';
					// 监听common-list组件 关注和顶踩
					uni.$on('updateFollSupport', (e) => {
						switch (e.type) {
							case 'follow': // 关注
								this.follow(e.data.user_id);
								break;
							case 'support': // 顶踩 操作
								this.doSupport(e.data);
								break;
						}
					});
					break;
				case 'topic':
					pageTitle = '话题';
					break;
				case 'user':
					pageTitle = '用户';
					break;
			}

			// 如果是app端，给他下面这些东西 (固定的，复制即可)
			// #ifdef APP-PLUS
			// 获取 到 当前窗口对象实例
			let currentWebview = this.$mp.page.$getAppWebview();
			// 获取 到 当前窗口 的原生导航栏
			let tn = currentWebview.getStyle().titleNView;
			// 直接修改 当前原生导航栏，搜索输入框中的占位符
			tn.searchInput.placeholder = '搜索' + pageTitle;
			// 最后 修改原生导航栏
			currentWebview.setStyle({
				titleNView: tn,
			});
			// #endif

			// 取出 本地存储的搜索历史数据
			let list = uni.getStorageSync('historySearchList');
			// 如果 本地存储中有， 赋值 搜索历史数组，渲染列表
			if (list) {
				this.historyList = JSON.parse(list);
			}
		},
		// 页面卸载 时
		onUnload() {
			// 如果是 搜索帖子
			if (this.type === 'post') {
				// 清除 监听事件
				uni.$off('updateFollSupport', (e) => {});
			}
		},
		// 监听下拉刷新 -------------------------------------------------
		onPullDownRefresh() {
			// 如果没有输入，搜索内容，关闭下拉刷新
			if (this.searchText === '') return uni.stopPullDownRefresh();
			//  isrefresh 刷新状态，true正在刷新
			this.getSeaData(true, () => {
				// 关闭下拉刷新状态
				uni.stopPullDownRefresh();
			});
		},
		// 监听页面触底，监听上拉加载
		onReachBottom() {
			if (this.loadmore !== '上拉加载更多') {
				return;
			}
			this.loadmore = '加载中...';
			// isrefresh 刷新状态，false 可以 上拉加载更多数据
			this.getSeaData(false);
		},
		// 存放所有事件 -------------------------------------------------
		methods: {
			// #ifndef APP-PLUS
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// #endif
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 找到 当前作者的 所有列表数据 */
				// 查询 搜索后的结果 下面list列表数据
				this.searchList.forEach((item) => {
					// 当前点击的用户下的 isFollow (改为true，隐藏关注)
					if (item.user_id === user_id) {
						item.isFollow = !item.isFollow;
					}
				});
			},
			// 顶 或 踩 （操作）---------------------------------------
			doSupport(e) {
				// 拿到 当前的分类选项卡 对应的list列表数据
				this.searchList.forEach((item) => {
					// 拿到 每一条 帖子的id
					// 如果列表数据id 和 顶踩 操作id一致
					if (item.id === e.id) {
						// console.log('顶踩操作',item);
						// 判断之前是否已经 赞 或踩 (之前未操作)
						if (item.support.type === '') {
							/* 4. 点击当前 赞 或 踩 数量+1
							 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
							item.support[e.type + '_count']++;
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
							// 赞 -1
							item.support.support_count--;
							// 踩 +1
							item.support.unsupport_count++;
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
							// 赞 +1
							item.support.support_count++;
							// 踩 -1
							item.support.unsupport_count--;
						}
						/* 2. 赋值给，子组件发布的type（赞 或踩）
						   3. 子组件 通过type 判断 添加样式 或 事件 */
						item.support.type = e.type;
					}
				});
				// 消息提示
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				uni.showToast({ title: msg, icon: 'none', duration: 500 });
			},
			// 点击搜索历史-------------------------
			tabSearchHistory(text) {
				// 将点击的文字，赋值给搜索内容
				this.searchText = text;
				// 调用搜索请求
				this.searchEvent();
			},
			// 搜索事件  ---------------------------
			searchEvent() {
				// 收起键盘
				// uni.hideKeyboard();
				// 加入搜索历史 列表中
				// 判断 搜索关键字，索引，是否存在于 搜索历史列表中
				let index = this.historyList.findIndex((v) => v === this.searchText);
				if (index !== -1) {
					// 如果找到 关键字索引，存在于搜索历史列表中
					// 调用 util.js封装的 数组去重置顶 工具
					this.$U._toFirst(this.historyList, index);
				} else {
					// 否则，将 关键字 ，添加到 搜索历史最前面
					this.historyList.unshift(this.searchText);
				}
				// 设置 储存于本地存储当中
				uni.setStorageSync('historySearchList', JSON.stringify(this.historyList));
				// 请求 搜索 接口
				this.getSeaData();
			},
			/* 搜求 请求 接口 封装 ---------------------------------------
		       isrefresh 刷新状态
			   callback 回调函数，主要 关闭下拉刷新
			*/

			getSeaData(isrefresh = true, callback = false) {
				// 获取数据中 处于 loading状态
				uni.showLoading({
					title: '加载中...',
					mask: false,
				});
				// 判断刷新状态,用户正在刷新，只展示第一页数据，否则展示下一页数据
				this.page = isrefresh ? 1 : this.page + 1;
				// console.log('正在下拉刷新',isrefresh);

				// 请求 搜索 接口
				this.$H
					.post('/search/' + this.type, {
						keyword: this.searchText, //关键字
						page: this.page, // 页码
						// },{token,这个接口不需要传}).then
					})
					.then((res) => {
						if(res.list.length==0){
							this.historyText = '抱歉，没有搜索到有关内容';
							return uni.showToast({
								title:'抱歉，没有搜索到有关内容',
								icon:'none'
							})
						}
						// 循环获取到，指定的列表数据，要循环遍历一下(整理格式)
						let list = [];
						switch (this.type) {
							case 'post': // 如果是帖子
								list = res.list.map((v) => {
									// 调用 封装的 工具类utils.js中，转换列表数据方法
									return this.$U.forMatCommonList(v);
								});
								break;
							case 'topic': // 如果是话题
								list = res.list.map((v) => {
									return {
										id: v.id, // 此条话题数据 id
										coverImg: v.titlepic, // 话题图片
										title: v.title, // 话题名称
										desc: v.desc, // 话题描述
										news_count: v.post_count, // 动态 数据
										today_count: v.todaypost_count, // 今日 数据
									};
								});
								break;
							case 'user': // 如果是用户
								list = res.list.map((v) => {
									return {
										id: v.id, // 用户id
										avatarImg: v.userpic, //头像
										username: v.username, // 用户名
										sex: v.userinfo.sex, // 0:未知，1:男 2:女
										age: v.userinfo.age, // 年龄
										isFollow: false, // 是否关注
									};
								});
								break;
						}

						/* push到 搜索到 searchList数组中。渲染页面
					 如果 处于刷新状态，赋值当前页数据，否则【原有数据，新数据】合并*/
						this.searchList = isrefresh ? [...list] : [...this.searchList, ...list];
						/* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
						this.loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多';
						// 隐藏loading
						uni.hideLoading();
						// 判断 调用搜索函数，传入的回调函数
						if (typeof callback === 'function') {
							callback();
						}
					})
					.catch((err) => {
						this.historyText = '抱歉，没有搜索到有关内容';
						// 请求失败也要隐藏
						// 如果请求失败 ，让页数 回到原点
						this.page--;
						// 隐藏loading
						uni.hideLoading();
						// 判断 调用搜索函数，传入的回调函数
						if (typeof callback === 'function') {
							callback();
						}
					});
			},
		},
	};
</script>

<style lang="scss"></style>
